import React, { Component } from 'react';
import Debounce from 'lodash-decorators/debounce';
import { connect } from 'dva';
import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import SendModal from '../../components/Shop/SendModal';
import styles from './GoodOrderProfile.less';

const { Step } = Steps;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);





const extra =(item)=> (
  <Row>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>状态</div>
      <div className={styles.heading}>{item.status_label}</div>
    </Col>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>订单金额</div>
      <div className={styles.heading}>¥ {item.price}</div>
    </Col>
  </Row>
);

const description = (item)=> (
  <DescriptionList className={styles.headerList} size="small" col="2">
    <Description term="创建人">{item.user.name}</Description>
    <Description term="订购产品">{item.order_name}</Description>
    <Description term="创建时间">{item.created_at}</Description>
    <Description term="快递类型">{item.status > 1 ? item.express_type:'暂无'}</Description>
    <Description term="快递单号">{item.status > 1 ? item.express_no:'暂无'}</Description>
    <Description term="备注">{item.remark?item.remark:''}</Description>
  </DescriptionList>
);

const columns = [{
  title: '状态',
  dataIndex: 'AcceptStation',
  key: 'AcceptStation',
}, {
  title: '时间',
  dataIndex: 'AcceptTime',
  key: 'AcceptTime',
}, {
  title: '备注',
  dataIndex: 'Remark',
  key: 'Remark',
}];

// const popoverContent = (
//   <div style={{ width: 160 }}>
//     {item.user.name}
//     <span className={styles.textSecondary} style={{ float: 'right' }}>
//       <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
//     </span>
//     <p className={styles.textSecondary} style={{ marginTop: 4 }}>耗时：2小时25分钟</p>
//   </div>
// );

// const customDot = (dot, { status }) => (status === 'process' ?
//   <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
//     {dot}
//   </Popover>
//   : dot
// );



@connect(state => ({
  shop_order: state.shop_order,
}))
export default class GoodOrderProfile extends Component {
  state = {
    operationkey: 'tab1',
    stepDirection: 'horizontal',
    dataSource:[],
  }

  componentDidMount() {
    const { dispatch, match } = this.props;
    dispatch({
      type: 'shop_order/fetchService',
      payload: {id: match.params.id},
    });
    dispatch({
      type: 'shop_order/fetchExpress',
      payload: {id: match.params.id},
      callback:(res)=>{
        console.log(res);
        const { shop_order: {expressData} } = this.props; 
        this.setState({
          dataSource:expressData.Traces
        })
      }
    });

    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setStepDirection);
  }

  onOperationTabChange = (key) => {
    this.setState({ operationkey: key });
  }

  @Debounce(200)
  setStepDirection = () => {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }



  render() {
    const { stepDirection } = this.state;
    const { shop_order: {item} } = this.props;
    const menu = (
      <Menu onClick={({key})=>{
        console.log(key);
        this.props.dispatch({
          type: 'shop_order/remove',
          payload: {id: item.id},
          callback:()=>{
            this.props.dispatch({
              type: 'shop_order/fetchService',
              payload: {id: item.id},
            })
          }
        })
        }}>
        <Menu.Item key="remove">删除订单</Menu.Item>
      </Menu>
    );

  

    const action = (
      <div>
        <ButtonGroup>
          <Button disabled={item.status != 0} onClick={()=>{ this.props.dispatch({type:'shop_order/cancel',payload:{id:item.id},callback:()=>{
            this.props.dispatch({
              type: 'shop_order/fetchService',
              payload: {id: item.id},
              callback:()=>{
                
              }
            })
          }}) }}>取消订单</Button>
           <Button disabled={item.status != 4} onClick={()=>{ this.props.dispatch({type:'shop_order/remove',payload:{id:item.id},callback:()=>{
            this.props.dispatch({
              type: 'shop_order/fetchService',
              payload: {id: item.id},
            })
          }}) }}>删除订单</Button>
        </ButtonGroup>
        <Button disabled={item.stauts != 1} onClick={()=>{ this.props.dispatch({type:'shop_order/changeShipModal',payload:true}) }} type="primary">发货</Button>
      </div>
    );

    // const { advancedLoading, advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
    

    return (
      <PageHeaderLayout
        title={`订单号：${item.order_no}`}
        logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
        action={action}
        content={description(item)}
        extraContent={extra(item)}
      >
        <Card title="订单流程" style={{ marginBottom: 24 }} bordered={false}>
          <Steps direction={stepDirection}  current={item.status}>
            <Step title="提交订单" />
            <Step title="订单支付"/>
            <Step title="商品发货" />
            <Step title="商品签收" />
            <Step title="完成" />
          </Steps>
        </Card>
        <Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="用户姓名">{item.user.name}</Description>
            <Description term="手机">{item.user.phone}</Description>
            <Description term="联系方式">{item.address.contact_phone}</Description>
            <Description term="联系地址">{item.address.address}</Description>
          </DescriptionList>
          <h4 style={{ marginBottom: 16 }}>订单商品</h4>
          <Card type="inner" title="订单商品列表">
            {item.goodsArray.map(good => (
              <div>
                <DescriptionList size="small" style={{ marginBottom: 16 }} title={good.name}>
                  <Description term="数量">{good.good_num}</Description>
                  <Description term="价格">{good.price}</Description>
                  <Description term="运费">{good.ship_money}</Description>
                  <Description term="简介">{good.description}</Description>
                </DescriptionList>
                <Divider style={{ margin: '16px 0' }} />
              </div>
                  )
              )}
          </Card>
        </Card>
        <Card title="物流信息" style={{ marginBottom: 24 }} bordered={false}>
        <Table dataSource={this.state.dataSource} columns={columns} />
        </Card>
        <SendModal onSendComplete={()=>{
          dispatch({
            type: 'shop_order/fetchService',
            payload: {id: item.id},
          });
         }} item={item} />
      </PageHeaderLayout>
    );
  }
}
